import { configureStore } from "@reduxjs/toolkit"
import todoReducer from "./todoSlice"
import { apiSlice } from "./apiSlice"
import { useDispatch, TypedUseSelectorHook, useSelector } from "react-redux"

export const todoStore = () => {
  return configureStore({
    reducer: {
      todo: todoReducer,
      [apiSlice.reducerPath]: apiSlice.reducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(apiSlice.middleware),
  })
}

export type TodoStore = ReturnType<typeof todoStore>
export type RootState = ReturnType<TodoStore['getState']>
export type TodoDispatch = TodoStore['dispatch']
export const useTodoDispatch: () => TodoDispatch = useDispatch
export const useTodoSelector: TypedUseSelectorHook<RootState> = useSelector
